<template>
  <div :style="{height:'100vh',overflowX:'hidden'}" class="index">
    <v-header :items="items"></v-header>
    <Breadcrumb :home="bread.home" :model="bread.items"/>
    <Splitter class="p-mt-5 p-mb-5  p-pb-3">
      <SplitterPanel class="p-ai-center p-jc-center">
        <Tag class="p-mt-3" icon="pi pi-info-circle" severity="info" value="未提交"></Tag>
        <Panel v-for="item in list1" class="p-m-3" :collapsed="true" :toggleable="true" :header="item.name">
          <span v-if="!item.refList.length">暂无商品信息~</span>
          <Timeline v-else :value="item.refList" align="alternate">
            <template #content="slotProps">
              <img :src="slotProps.item.pic" class="goodsPic">
              <Tag :value="slotProps.item.commodityName+'#'+slotProps.item.id" class="p-mt-3" severity="primary"></Tag>
            </template>
          </Timeline>
          <template #icons>
            <button class="p-panel-header-icon p-mr-2" @click="toSubmit(item.id)">
              <span class="pi pi-check-circle"></span>
            </button>
            <button class="p-panel-header-icon p-mr-2" @click="toDelete(item.id)">
              <span class="pi pi-times-circle"></span>
            </button>
          </template>
        </Panel>
      </SplitterPanel>
      <SplitterPanel class="p-ai-center p-jc-center">
        <Tag class="p-mt-3" icon="pi pi-exclamation-triangle" severity="warning" value="未审核"></Tag>
        <Panel v-for="item in list2" class="p-m-3" :collapsed="true" :toggleable="true" :header="item.name">
          <span v-if="!item.refList.length">暂无商品信息~</span>
          <Timeline v-else :value="item.refList" align="alternate">
            <template #content="slotProps">
              <img :src="slotProps.item.pic" class="goodsPic">
              <Tag :value="slotProps.item.commodityName+'#'+slotProps.item.id" class="p-mt-3" severity="primary"></Tag>
            </template>
          </Timeline>
          <template #icons>
            <button class="p-panel-header-icon p-mr-2" @click="toDelete(item.id)">
              <span class="pi pi-times-circle"></span>
            </button>
          </template>
        </Panel>
      </SplitterPanel>
      <SplitterPanel class="p-ai-center p-jc-center">
        <Tag class="p-mt-3" icon="pi pi-check" severity="success" value="已通过"></Tag>
        <Panel v-for="item in list3" class="p-m-3" :collapsed="true" :toggleable="true" :header="item.name">
          <span v-if="!item.refList.length">暂无商品信息~</span>
          <Timeline v-else :value="item.refList" align="alternate">
            <template #content="slotProps">
              <img :src="slotProps.item.pic" class="goodsPic">
              <Tag :value="slotProps.item.commodityName+'#'+slotProps.item.id" class="p-mt-3" severity="primary"></Tag>
            </template>
          </Timeline>
          <template #icons>
            <button class="p-panel-header-icon p-mr-2" @click="toDelete(item.id)">
              <span class="pi pi-times-circle"></span>
            </button>
          </template>
        </Panel>
      </SplitterPanel>
      <SplitterPanel class="p-ai-center p-jc-center">
        <Tag class="p-mt-3" icon="pi pi-times" severity="danger" value="未通过"></Tag>
        <Panel v-for="item in list4" class="p-m-3" :collapsed="true" :toggleable="true" :header="item.name">
          <span v-if="!item.refList.length">暂无商品信息~</span>
          <Timeline v-else :value="item.refList" align="alternate">
            <template #content="slotProps">
              <img :src="slotProps.item.pic" class="goodsPic">
              <Tag :value="slotProps.item.commodityName+'#'+slotProps.item.id" class="p-mt-3" severity="primary"></Tag>
            </template>
          </Timeline>
          <template #icons>
            <button class="p-panel-header-icon p-mr-2" @click="toDelete(item.id)">
              <span class="pi pi-times-circle"></span>
            </button>
          </template>
        </Panel>
      </SplitterPanel>
    </Splitter>
  </div>
  <Dialog :style="{width: '40vw'}" :visible="showTable" header="新增审核表" :closable="false" :modal="true">
    <div class="row">
      <Dropdown v-model="review.reviewType" :options="typeOption" optionLabel="name" optionValue="code"
                placeholder="审核类型"/>
    </div>
    <div class="row">
      <Dropdown v-model="review.reviewer" :options="adminList" optionLabel="aliasName" optionValue="id"
                placeholder="审核人"/>
    </div>
    <template #footer>
      <Button class="p-button-text" icon="pi pi-times" label="取消" @click="showTable=false"/>
      <Button autofocus icon="pi pi-check" label="确定" @click="toCreate"/>
    </template>
  </Dialog>

</template>
<script setup>
import S from "@/store"
import {useToast} from "primevue/usetoast"
import {ref, onMounted} from 'vue'
import service from "@/request.js"
import vHeader from '@/components/header'
import {useConfirm} from "primevue/useconfirm"

const Toast = useToast (), Confirm = useConfirm ()

let items = ref ([{
  label: '新增审核表',
  icon: 'pi pi-fw pi-plus',
  command () {
    showTable.value = true
  }
}]), typeOption = [{name: '入库审核', code: 0}, {name: '出库审核', code: 1}, {name: '清库审核', code: 2}, {name: '删除审核', code: 3}]
const bread = {
  home: {icon: 'pi pi-home', to: '/index'},
  items: [
    {label: '审核管理', to: '/car'}
  ]
}


let showTable = ref (false), adminList = ref ([]), review = ref ({})
let list1 = ref ([]), list2 = ref ([]), list3 = ref ([]), list4 = ref ([])


function toCreate () {
  service.post ('review/', review.value).then (r => {
    showTable.value = false
    getReviewList ()
  }).catch (e => Toast.add ({severity: 'error', summary: e, life: 3000}))
}

function toSubmit (id) {
  Confirm.require ({
    message: '是否提交此审核表',
    header: '确认提交',
    icon: 'pi pi-exclamation-triangle',
    accept: () => {
      service.put (`review/id/${id}/archive`).then (r => {
        getReviewList ()
      }).catch (e => Toast.add ({severity: 'error', summary: e, life: 3000}))
    }
  })
}

function toDelete (id) {
  Confirm.require ({
    message: '是否删除此审核表',
    header: '确认删除',
    icon: 'pi pi-exclamation-triangle',
    accept: () => {
      service.delete (`review/id/${id}`).then (r => {
        getReviewList ()
      }).catch (e => Toast.add ({severity: 'error', summary: e, life: 3000}))
    }
  })
}

function getReviewList () {
  //未提交
  service.get ('review/?isArchive=0').then (r => {
    S.commit ('setLoading', false)
    list1.value = r
  })
  //已提交未审核
  service.get ('review/?isArchive=1&isReview=0').then (r => list2.value = r)
  //已审核未通过
  service.get ('review/?isReview=1&isAccess=0').then (r => list4.value = r)
  //已审核已通过
  service.get ('review/?isReview=1&isAccess=1').then (r => list3.value = r)
}


onMounted (() => {
  service.get ('user/reviewer').then (r => adminList.value = r)
  getReviewList ()
})
</script>

<style scoped lang="stylus">
.row
  margin 30px 40px

.goodsPic
  width 50px
  border-radius 10px
  vertical-align middle
  margin-right 20px
</style>
